<script setup>
import {ref, computed, reactive, onMounted} from 'vue'
import {useAclStore } from "@/stores/aclStore.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  aclId: {
    type: String,
    required: true
  }
})

const aclStore = useAclStore()
const dialogVisible = ref(false)

  // 权限数据
 const aclData = reactive({
      id: '',
      name: '',
      code: '',
      type: '',
      url: '',
      isDelete: '',
      createdBy: '',
      updatedBy: '',
      createdTime: '',
      updatedTime: ''
 })
const handleClose = () => {
  dialogVisible.value = false
}
// 时间格式化方法
const formatTime = (time) => {
  if (!time) return ''
  return new Date(time).toLocaleString()
}

// 获取权限详情
const fetchAclDetail = async (id) => {
  try {
    await aclStore.getAclDetail(id)
    Object.assign(aclData, aclStore.aclDetail)
    console.log('权限详情:', aclStore.aclDetail)
  } catch (error) {
    console.error('获取权限详情失败:', error)
    ElMessage.error('获取权限详情失败')
  }
}

// 在挂载完成之后，根据父组件传过来的Id调用接口获取权限数据
onMounted(() => {
  if (props.aclId) {
    fetchAclDetail(props.aclId)
  }
})

// 暴露方法，父组件可以调用
defineExpose({
  openDialog: () => {
    dialogVisible.value = true
    if (props.aclId) {
      fetchAclDetail(props.aclId)
    }
  }
})
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="权限详情"
      width="50%"
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="权限ID">{{ aclData.id }}</el-descriptions-item>
      <el-descriptions-item label="权限名称">{{ aclData.name }}</el-descriptions-item>
      <el-descriptions-item label="权限编码">{{ aclData.code }}</el-descriptions-item>
      <el-descriptions-item label="权限类型">
        <el-tag :type="aclData.type === 1 ? 'danger' : aclData.type === 2 ? 'primary' : 'success'">
          {{ aclData.type === 1 ? 'API' : aclData.type === 2 ? '菜单' : '按钮' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="URL路径">{{ aclData.url }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="aclData.isDelete === 0 ? 'success' : 'danger'">
          {{ aclData.isDelete === 0 ? '启用' : '禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建人">{{ aclData.createdBy }}</el-descriptions-item>
      <el-descriptions-item label="更新人">{{ aclData.updatedBy }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ formatTime(aclData.createdTime) }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ formatTime(aclData.updatedTime) }}</el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>